<!--
 * @Descripttion: 
 * @Author: zhanyi
 * @Date: 2021-10-27 11:06:48
 * @FilePath: \wczd-mobile\src\pages\danger\danger-check-edit.vue
-->
<template>
  <div class="danger-check-edit">
    <secondTopPanel>
      <div slot='title'>{{ZGformData.recState === '2' ? '隐患验收' : '查看详情'}}</div>
    </secondTopPanel>
    <div class="danger-manager-aaa">
      <swiper v-if="swiperData&&swiperData.length!==0" class="swiper" circular indicator-dots autoplay>
        <swiper-item v-for="(item ,index) in swiperData" :key="index">
          <image v-if="item.type==='image'" mode="aspectFit" class="swiper-item" :src="item.url+'?token='+token" style="width:100%,height:100%">
          </image>
          <video v-if="item.type==='video'" class="swiper-item" :src="item.url+'?token='+token" style="width:100%,height:100%">
          </video>
        </swiper-item>
      </swiper>
    </div>
    <div class="model-title">一、隐患信息</div>
    <evanForm class="evan-form" :label-style="{width:'180upx',paddingRight:'20upx'}" :model='ZGformData'>
      <evanFormItem label='隐患名称' prop="dangerName">
        {{ZGformData.dangerName}}
      </evanFormItem>
      <evanFormItem label='地点' prop="dangerAddress">
        {{ZGformData.dangerAddress}}
      </evanFormItem>
      <evanFormItem label='隐患状态' prop="dangerName">
        <div class="_right danger-state" :class="_isTextColor(ZGformData)">{{_isDanger(ZGformData)}}</div>
      </evanFormItem>
      <evanFormItem label='创建时间' prop="createTime">
        {{ZGformData.createTime}}
      </evanFormItem>
      <evanFormItem label='隐患类型' prop='dangerType'>
        {{ ZGformData.dangerType }}<span v-if="ZGformData.dangerType2">/{{ ZGformData.dangerType2 }}</span>
      </evanFormItem>
      <evanFormItem label='具体情况(含建议)' prop="dangerContent">
        {{ZGformData.dangerContent}}
      </evanFormItem>
      <evanFormItem label='照片' prop="recUrlsParse" label-position='top'>
        <ImageUpload v-if="ZGformData.dangerUrlsParse" :remove="false" :_max="ZGformData.dangerUrlsParse.length" :imgUrlData='ZGformData.dangerUrlsParse'></ImageUpload>
      </evanFormItem>
      <evanFormItem label='视频' prop="revVideoUrlsParse" label-position='top'>
        <ImageUpload v-if="ZGformData.videoUrlsParse" :_mediaType="'video'" :remove="false" :_max="ZGformData.videoUrlsParse.length" :imgUrlData='ZGformData.videoUrlsParse'></ImageUpload>
      </evanFormItem>
    </evanForm>
    <div class="model-title">二、整改详情</div>
    <evanForm class="evan-form" style="padding-top:0" :label-style="{width:'180upx',paddingRight:'20upx'}" :model='ZGformData'>
      <evanFormItem label='整改开始时间' prop="rec_time">
        <input class="form-input" v-model="ZGformData.requireStartTm" disabled type="text" placeholder="">
      </evanFormItem>
      <evanFormItem label='整改结束时间' prop="rec_time">
        <input class="form-input" v-model="ZGformData.requireEndTm" disabled type="text" placeholder="">
      </evanFormItem>
      <evanFormItem label='整改部门' prop="recDeptname">
        <input class="form-input" v-model="ZGformData.recDeptname" disabled type="text" placeholder="">
      </evanFormItem>
      <evanFormItem label='整改人' prop="recUsername">
        <input class="form-input" v-model="ZGformData.recUsername" disabled type="text" placeholder="">
      </evanFormItem>
      <evanFormItem label='整改反馈内容' prop="recContent">
        <input class="form-input" v-model="ZGformData.recContent" disabled type="text" placeholder="">
      </evanFormItem>
      <evanFormItem label='照片' prop="recUrls" label-position='top'>
        <ImageUpload v-if="ZGformData.recUrlsParse" @imageUrlCallBack='imageUrlCallBack' :remove="false" :_max="ZGformData.recUrlsParse.length" :imgUrlData='ZGformData.recUrlsParse'></ImageUpload>
      </evanFormItem>
      <evanFormItem label='视频' prop="revVideoUrls" label-position='top'>
        <ImageUpload v-if="ZGformData.revVideoUrlsParse" :_mediaType="'video'" :remove="false" :_max="ZGformData.revVideoUrlsParse.length" @imageUrlCallBack='videoUrlCallBack' :imgUrlData='ZGformData.revVideoUrlsParse'></ImageUpload>
      </evanFormItem>
    </evanForm>
    <div class="model-title">三、验收详情</div>
    <div v-if="!isDetail">
      <evanForm ref="form" class="evan-form" style="padding-top:0" :label-style="{width:'180upx',paddingRight:'20upx'}" :model='SHformData' :rules='rules'>
        <evanFormItem label='验收评语' prop="piContent">
          <input class="form-input" v-model="SHformData.piContent" type="text" placeholder="请输入验收评语">
        </evanFormItem>
      </evanForm>
      <div class="btn">
        <button class="submit" @click="isubmit">验收不通过</button>
        <button type="primary" class="submit" @click="submit">验收通过</button>
      </div>
    </div>

    <div v-if="isDetail">
      <evanForm ref="form" class="evan-form" style="padding-top:0" :label-style="{width:'180upx',paddingRight:'20upx'}" :model='ZGformData'>

        <evanFormItem label='验收部门' prop="checkDeptname">
          <input class="form-input" v-model="ZGformData.checkDeptname" disabled type="text" placeholder="">
        </evanFormItem>
        <evanFormItem label='验收人' prop="checkUsername">
          <input class="form-input" v-model="ZGformData.checkUsername" disabled type="text" placeholder="">
        </evanFormItem>
        <evanFormItem label='验收评语' prop="piContent">
          {{ZGformData.piContent}}
        </evanFormItem>
      </evanForm>
    </div>
  </div>
</template>

<script>
import secondTopPanel from '@/pages/component/top-panel/secondTopPanel.vue'
import evanForm from '@/components/evan-form/evan-form.vue'
import evanFormItem from '@/components/evan-form-item/evan-form-item.vue'
import uniDatetimePicker from '@/components/uni-datetime-picker/uni-datetime-picker.vue'
import { dangerAllotVerify, rectifyInfoOne } from "@/api/danger";
import ImageUpload from "@/pages/component/imageUpload/imageUpload.vue";
import { getToken } from '@/utils/auth'//获取token

export default {
  name: 'danger-check-edit',
  components: { secondTopPanel, evanForm, evanFormItem, uniDatetimePicker, ImageUpload },
  data () {
    return {
      isDetail: false,
      SHformData: {
        piContent: null
      },
      dangerState: [],
      ZGformData: {
        recUrls: '',
        revVideoUrls: '',
        dangerUrlsParse: [],
        videoUrlsParse: [],
        createTime: null,
      },
      rules: {
        piContent: [
          { required: true, message: '验收评语不能空' }
        ]
      },
      token: (getToken() ? 'Bearer ' + getToken() : '')
    }
  },
  computed: {
    swiperData () {
      let imageData = []
      let videoData = []
      if (this.ZGformData.dangerUrlsParse.length !== 0) {
        this.ZGformData.dangerUrlsParse.forEach(element => {
          imageData.push({ 'url': process.uniEnv.baseUrl + '/profile' + element.url, type: 'image' })
        });
      }
      if (this.ZGformData.videoUrlsParse.length !== 0) {
        this.ZGformData.videoUrlsParse.forEach(element => {
          videoData.push({ 'url': process.uniEnv.baseUrl + '/profile' + element.url, type: 'video' })
        });
      }
      return [...imageData]
    },
    // 计算是否是隐患
    _isDanger: function () {
      return function (item) {
        // return item.isDanger === '0' ? '未确定' : item.isDanger === '1' ? (item.dangerState === '1' ? '未指派' : item.dangerState === '2' ? '待整改' : '验收通过') : item.isDanger === '3' ? '现场整改' : '确定非隐患'
        for (let index = 0; index < this.dangerState.length; index++) {
          const element = this.dangerState[index];
          if (element.dictValue === item.dangerState) {
            return element.dictLabel
          }
        }
      }
    },
    // 计算颜色样式
    _isTextColor: function () {
      return function (item) {
        // return item.isDanger === '0' ? '_RED' : item.isDanger === '1' ? (item.dangerState === '1' ? '_RED' : item.dangerState === '2' ? '_YELLOW' : '_GREEN') : '_RED'
        return item.dangerState === '1' ? '_RED' : item.dangerState === '2' ? '_YELLOW' : item.dangerState === '0' ? '_RED' : '_GREEN'
      }
    },
  },
  onLoad: function (option) {
    this._rectifyInfoOne(option)
    this.isDetail = false
  },
  mounted () {
    this.getDicts('danger_state').then((response) => {
      this.dangerState = response.data
    })
    // 这里必须放在mounted中，不然h5，支付宝小程序等会找不到this.$refs.form
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    // 整改单条
    _rectifyInfoOne (data) {
      rectifyInfoOne(data).then(res => {
        if (res.data.recState !== '2') {
          this.isDetail = true
        }
        let item = res.data
        item.dangerUrlsParse = []
        item.videoUrlsParse = []
        item.recUrlsParse = []
        item.revVideoUrlsParse = []
        item.recUrlsParse = JSON.parse(item.recUrls || '[]')
        item.revVideoUrlsParse = JSON.parse(item.revVideoUrls || '[]')
        if (item.dangerUrls)
          item.dangerUrlsParse = JSON.parse(item.dangerUrls)
        if (item.videoUrls)
          item.videoUrlsParse = JSON.parse(item.videoUrls)
        this.ZGformData = item
      })
    },
    // 图片视频回调
    imageUrlCallBack (data) {
      this.ZGformData.recUrls = JSON.stringify(data)
    },
    videoUrlCallBack (data) {
      this.ZGformData.revVideoUrls = JSON.stringify(data)
    },
    // 验收提交 
    submit () {
      this.$refs.form.validate((response) => {
        if (response) {
          let submitData = {
            recState: '3',
            id: this.ZGformData.id,
            dangerId: this.ZGformData.dangerId,
            piContent: this.SHformData.piContent
          }
          dangerAllotVerify(submitData).then(res => {
            uni.showToast({
              title: '验收通过',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 500);
          })
        }
      })

    },
    isubmit () {
      this.$refs.form.validate((response) => {
        if (response) {
          let submitData = {
            recState: '4',
            id: this.ZGformData.id,
            dangerId: this.ZGformData.dangerId,
            piContent: this.SHformData.piContent
          }
          dangerAllotVerify(submitData).then(res => {
            uni.showToast({
              title: '验收不通过',
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 500);
          })
        }
      })
    }
  },
}
</script>

<style scoped lang="scss">
.danger-check-edit {
  height: 100%;
  .evan-form {
    overflow: auto;
    padding: 0 40upx 0;
    margin-top: 0upx;
    background-color: #fff;
  }
  .btn {
    margin-top: 40upx;
    display: flex;
    .submit {
      width: 40%;
      line-height: 80upx;
      margin-bottom: 40upx;
    }
  }
}
.form-input {
  font-size: 28upx;
  color: #333;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  height: 60upx;
  &.textarea {
    height: 110upx;
    padding: 24rpx 0;
    text-align: left;
  }
}
.img-cont {
  margin: auto;
  display: flex;
  align-items: center;
  .img-item {
    image {
      width: 25vw;
      height: 25vw;
      margin-right: 1vw;
      margin-top: 1vw;
    }
  }
}
.swiper-item {
  width: 100%;
  height: 100%;
}
.swiper {
  height: 200px;
}
.danger-manager-aaa {
  padding-top: 100upx;
}
</style>
